<template>
  <div class="inp">
    <input type="text" :value="modelValue" @input="changeText($event)" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
const value = ref();

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String || Number,
  },
});
const _throttle = (func: Function, timer: number) => {
  let lastTime: any;

  return function (...arg: any) {
    // console.log(1);
    let nowTime = Date.now();
    if (nowTime - lastTime < timer) {
      return;
    }
    lastTime = nowTime;

    func.apply(null, arg);
  };
};

const changeText = _throttle((event: Event) => {
  const target = event.target as HTMLInputElement;
  value.value = target.value;
}, 1000);

watch(value, (value) => {
  // console.log(value);

  emit("update:modelValue", value);
});
</script>

<style lang="less" scoped>
.inp {
  height: 100px;
  width: 300px;

  input {
    border: 1px solid pink;
    height: 100px;
    width: 300px;
    padding: 10px;
  }
}
</style>
